﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
	Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>车间管理</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 搜索条件表单 -->
                <form class="layui-form" id="search-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">车间编码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="WorkshopCode" placeholder="请输入车间编码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">车间名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="WorkshopName" placeholder="请输入车间名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="search-btn">
                                <i class="layui-icon layui-icon-search"></i>查询
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

                <!-- 表格上方的工具栏 -->
                <script type="text/html" id="toolbar">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="add">
                            <i class="layui-icon layui-icon-add-1"></i>新增
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
                            <i class="layui-icon layui-icon-delete"></i>删除
                        </button>
                    </div>
                </script>

                <!-- 数据表格容器 -->
                <table id="workshop-table" lay-filter="workshop-table"></table>

                <!-- 表格中每一行的操作按钮 -->
                <script type="text/html" id="row-toolbar">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
                </script>

            </div>
        </div>
    </div>

    <!-- 新增/编辑弹窗的 HTML 结构 -->
    <div id="edit-dialog" style="display: none; padding: 20px;">
        <form class="layui-form" id="edit-form" lay-filter="edit-form">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">车间编码</label>
                <div class="layui-input-block">
                    <input type="text" name="workshopCode" required placeholder="请输入或点击按钮生成" autocomplete="off" class="layui-input" style="width: 300px; display: inline-block; vertical-align: middle;">
                    <button type="button" class="layui-btn" id="generate-code-btn" style="display: inline-block; vertical-align: middle;">自动生成</button>
                    <div class="layui-word-aux validation-msg" style="color: #FF5722 !important; display: none; line-height: 1; margin-top: 2px; font-size: 12px;">车间编码不能为空</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">车间名称</label>
                <div class="layui-input-block">
                    <input type="text" name="workshopName" required placeholder="请输入车间名称" autocomplete="off" class="layui-input">
                    <div class="layui-word-aux validation-msg" style="color: #FF5722 !important; display: none; line-height: 1; margin-top: 2px; font-size: 12px;">车间名称不能为空</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">车间面积</label>
                <div class="layui-input-block">
                    <input type="number" name="workshopSize" placeholder="请输入车间面积" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">负责人</label>
                <div class="layui-input-block">
                    <input type="text" name="workshopPerson" required placeholder="请输入负责人" autocomplete="off" class="layui-input">
                    <div class="layui-word-aux validation-msg" style="color: #FF5722 !important; display: none; line-height: 1; margin-top: 2px; font-size: 12px;">负责人不能为空</div>
                </div>
            </div>
            <div class="layui-form-item" pane>
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-block">
                    <input type="radio" name="isNo" value="1" title="是" checked>
                    <input type="radio" name="isNo" value="0" title="否">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="context" placeholder="请输入备注" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: right;">
                <button class="layui-btn" lay-submit lay-filter="save-btn">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancel-btn">取消</button>
            </div>
        </form>
    </div>

    <!-- 引入必要的 JavaScript 库 -->
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.all.js"></script>
    <script>
        // layui 模块化使用，引入所需模块
        layui.use(['table', 'form', 'layer'], function () {
            // 从 layui 中获取所需的对象
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;
            
            // 用于存储当前正在编辑的数据行的ID，0表示新增
            var currentEditId = 0;

            // 初始化数据表格
            table.render({
                elem: '#workshop-table', // 绑定到ID为 workshop-table 的 table 元素
                id: 'workshopTable',     // 表格的唯一ID，用于后续重载等操作
                url: '/Workshop/api/list', // 数据接口地址
                toolbar: '#toolbar',       // 开启表格头部工具栏，绑定到ID为 toolbar 的 script 标签
                defaultToolbar: ['exports', 'print'], // 开启默认工具栏（导出、打印）
                page: true, // 开启分页
                // 自定义请求参数，将 layui 默认的 page/limit 转换为后端需要的 skipCount/maxResultCount
                request: {
                    pageName: 'skipCount',
                    limitName: 'maxResultCount'
                },
                // 解析从服务器返回的数据
                parseData: function(res){
                    if (res.items) {
                        res.items.forEach(function(item) {
                            // Layui 的列筛选功能需要一个真实存在的字段，这里添加一个空字段以避免潜在问题
                            item.actions = ''; 
                        });
                    }
                    // 将后端返回的数据格式转换为 layui table 能识别的格式
                    return {
                        "code": 0, // 状态码，0代表成功
                        "msg": "", // 消息文本
                        "count": res.totalCount, // 数据总数
                        "data": res.items // 数据列表
                    };
                },
                // 定义表格的列
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'id', title: 'ID', width: 80, sort: true, hide: true },
                    { field: 'workshopCode', title: '车间编码', width: 150, sort: true },
                    { field: 'workshopName', title: '车间名称', width: 150, sort: true },
                    { field: 'workshopSize', title: '车间面积', width: 120, sort: true },
                    { field: 'workshopPerson', title: '负责人', width: 120 },
                    {
                        field: 'isNo', title: '是否启用', width: 100, templet: function (d) {
                            return d.isNo === 1 ? '<span class="layui-badge layui-bg-green">是</span>' : '<span class="layui-badge layui-bg-gray">否</span>';
                        }
                    },
                    { field: 'context', title: '备注' },
                    { field: 'actions', fixed: 'right', title: '操作', toolbar: '#row-toolbar', width: 150 }
                ]],
                // 定义后端接口返回的成功状态码
                response: {
                    statusCode: 0
                }
            });

            // 监听搜索表单的提交事件
            form.on('submit(search-btn)', function (data) {
                // 使用搜索表单中的数据重载表格
                table.reload('workshopTable', {
                    where: data.field, // 设置查询条件
                    page: {
                        curr: 1 // 重新从第1页开始
                    }
                });
                return false; // 阻止表单的默认提交行为
            });

            // 监听表格头部工具栏的事件
            table.on('toolbar(workshop-table)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id); // 获取表格中被选中的行
                switch (obj.event) {
                    // 处理"新增"按钮点击事件
                    case 'add':
                        openEditDialog('add');
                        break;
                    // 处理"删除"按钮点击事件
                    case 'delete':
                        var data = checkStatus.data; // 获取被选中的行的数据
                        if (data.length === 0) {
                            layer.msg('请选择要删除的行');
                        } else {
                            var ids = data.map(function(item) { return item.id; });
                            // 弹出确认框
                            layer.confirm('确定删除选中的 ' + data.length + ' 条数据吗？', function (index) {
                                // 发送批量删除请求
                                $.ajax({
                                    url: '/Workshop/api/batch-delete',
                                    type: 'POST',
                                    contentType: 'application/json',
                                    data: JSON.stringify(ids),
                                    success: function() {
                                        layer.msg('删除成功');
                                        table.reload('workshopTable'); // 重新加载表格
                                    },
                                    error: function() {
                                        layer.msg('删除失败');
                                    }
                                });
                                layer.close(index);
                            });
                        }
                        break;
                };
            });

            // 监听表格中每一行内部的工具条事件
            table.on('tool(workshop-table)', function (obj) {
                var data = obj.data; // 获取当前行的数据
                // 处理行内"删除"按钮点击事件
                if (obj.event === 'delete') {
                    layer.confirm('确定删除这条数据吗？', function (index) {
                         $.ajax({
                            url: '/Workshop/api/delete/' + data.id,
                            type: 'DELETE',
                            success: function() {
                                layer.msg('删除成功');
                                obj.del(); // 在前端直接删除这一行
                            },
                            error: function() {
                                layer.msg('删除失败');
                            }
                        });
                        layer.close(index);
                    });
                // 处理行内"编辑"按钮点击事件
                } else if (obj.event === 'edit') {
                    openEditDialog('edit', data);
                }
            });

            // 监听"自动生成编码"按钮的点击事件
            $('#generate-code-btn').on('click', function() {
                var timestamp = new Date().getTime();
                // 加上一个两位数的随机数，减少在同一毫秒内生成的编码冲突的可能性
                var randomSuffix = Math.floor(Math.random() * 100); 
                var newCode = 'WS' + timestamp + randomSuffix.toString().padStart(2, '0');
                $('#edit-form input[name="workshopCode"]').val(newCode);
            });

            /**
             * 打开新增或编辑弹窗
             * a param {string} type - 操作类型, 'add' 或 'edit'
             * a param {object} [data] - 编辑时传入的当前行数据
             */
            function openEditDialog(type, data) {
                var title = type === 'add' ? '新增车间' : '编辑车间';
                currentEditId = data ? data.id : 0;
                
                var codeInput = $('#edit-form input[name="workshopCode"]');
                var generateBtn = $('#generate-code-btn');

                // 打开一个 layui 弹层
                layer.open({
                    type: 1, // 弹层类型
                    title: title, // 弹层标题
                    area: ['600px', '550px'], // 弹层宽高
                    content: $('#edit-dialog'), // 弹层内容，指向一个DOM元素
                    success: function () {
                        // 弹层成功弹出后执行的回调
                        $('#edit-form')[0].reset(); // 重置表单
                        $('.validation-msg').hide(); // 隐藏所有验证消息
                        $('#edit-form .layui-input, #edit-form .layui-textarea').removeClass('layui-form-danger'); // 移除所有红色边框

                        if (type === 'edit') {
                            // 编辑模式下，填充表单并禁用编码框
                            form.val('edit-form', data);
                            codeInput.prop('disabled', true);
                            generateBtn.hide();
                        } else {
                            // 新增模式下，启用编码框
                            codeInput.prop('disabled', false);
                            generateBtn.show();
                        }
                        form.render(); // 重新渲染表单（特别是对于 radio, select 等）
                    }
                });
            }

            // 监听编辑/新增表单的"保存"按钮提交事件
            form.on('submit(save-btn)', function (data) {
                // 手动触发表单验证
                if (!validateForm()) {
                    return false; // 验证失败，阻止提交
                }

                var url, type;
                var formData = data.field; // 获取表单数据
                
                // 将 layui radio 的值从字符串转为整数
                formData.isNo = parseInt(formData.isNo);
                
                // 根据 currentEditId 判断是新增还是更新
                if (currentEditId > 0) {
                    url = '/Workshop/api/update/' + currentEditId;
                    type = 'PUT';
                    formData.id = currentEditId;
                } else {
                    url = '/Workshop/api/create';
                    type = 'POST';
                }

                // 发送 AJAX 请求保存数据
                $.ajax({
                    url: url,
                    type: type,
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function (res) {
                        layer.closeAll('page'); // 关闭所有弹层
                        layer.msg('保存成功');
                        table.reload('workshopTable'); // 重载表格
                        currentEditId = 0; // 重置当前编辑ID
                    },
                    error: function () {
                        layer.msg('保存失败');
                    }
                });

                return false; // 阻止表单的默认提交行为
            });

            /**
             * 自定义表单验证函数
             * a returns {boolean} - 验证是否通过
             */
            function validateForm() {
                var isValid = true;
                // 隐藏所有旧的提示并移除红框
                $('.validation-msg').hide();
                $('#edit-form .layui-input').removeClass('layui-form-danger');

                // 检查车间编码
                var workshopCodeInput = $('input[name="workshopCode"]');
                if (!workshopCodeInput.val()) {
                    workshopCodeInput.addClass('layui-form-danger');
                    workshopCodeInput.siblings('.validation-msg').show();
                    isValid = false;
                }

                // 检查车间名称
                var workshopNameInput = $('input[name="workshopName"]');
                if (!workshopNameInput.val()) {
                    workshopNameInput.addClass('layui-form-danger');
                    workshopNameInput.siblings('.validation-msg').show();
                    isValid = false;
                }
                
                // 检查负责人
                var workshopPersonInput = $('input[name="workshopPerson"]');
                if (!workshopPersonInput.val()) {
                    workshopPersonInput.addClass('layui-form-danger');
                    workshopPersonInput.siblings('.validation-msg').show();
                    isValid = false;
                }

                return isValid;
            }

            // 监听弹窗内"取消"按钮的点击事件
            $('#cancel-btn').on('click', function() {
                layer.closeAll('page'); // 关闭所有弹层
            });
        });
    </script>
</body>
</html>
